.controls-container {
  @icon-font-size: 18px;
  @font-color: rgb(238, 238, 238);
  @container-height: 42px;
  width: 100%;
  height: @container-height;
  color: @font-color;
  position: relative;
  &:hover {
    cursor: default;
  }
  &:after {
    content: '';
    width: calc(~"(100% + 26px)");
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);

  }
  .play-pause-timeline {
    height: 100%;
    float: left;
    text-align: center;
    line-height: @container-height;
    .play-pause {
      font-size: @icon-font-size;
      vertical-align: middle;
      padding: 0 10px 0 17px;
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
    .time-wrap {
      font-size: 14px;
      vertical-align: middle;
      padding-right: 20px;
    }
  }
  .multifunction {
    height: 100%;
    float: right;
    text-align: center;
    line-height: @container-height;
    &:hover {
      cursor: pointer;
    }
    .multifunction-volume,
    .multifunction-quality,
    .multifunction-setting,
    .multifunction-fullscreen {
      display: inline-block;
      font-size: 16px;
      vertical-align: middle;
      padding: 0 10px 0 10px;
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
    @popbox-bottom: 58px;
    .multifunction-volume {
      position: relative;
      padding: 0;
      .volume {
        padding: 10px;
      }
      .volume-pause-mask {
        position: absolute;
        width: 12px;
        height: 12px;
      }
      .volume-box {
        position: absolute;
        bottom: @popbox-bottom;
        left: 50%;
        margin-left: -16px;
        width: 32px;
        height: 120px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .7);
        .current-volume {
          @current-volume-height: 24px;
          width: 100%;
          height: @current-volume-height;
          margin: 0;
          line-height: @current-volume-height;
          text-align: center;
          &:hover {
            cursor: default;
          }
          .volume-value {
            font-size: 13px;
            font-style: normal;
          }
        }
        .volume-slider {
          width: 100%;
          height: 96px;
          display: flex;
          justify-content: center;
          align-items: center;
          .volume-slider-bg {
            width: 2px;
            height: 86px;
            border-radius: 1px;
            background-color: #fff;
            position: relative;
            .volume-slider-op {
              position: absolute;
              z-index: 1;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 1px;
              // background-color: #fbc100;
              .volume-slider-op-circle {
                @volume-slider-op-circle: 10px;
                position: absolute;
                top: -(@volume-slider-op-circle/2);
                left: 50%;
                margin-left: -(@volume-slider-op-circle/2);
                width: @volume-slider-op-circle;
                height: @volume-slider-op-circle;
                border-radius: 50%;
                // background-color: #fbc100;
              }
            }
            .volume-slider-mirror {
              position: absolute;
              z-index: 2;
              bottom: 0;
              left: -15px;
              width: 32px;
              height: calc(~'100% + 5px');
            }
          }
        }
      }
    }
    .multifunction-quality {
      position: relative;
      padding: 0;
      font-size: 14px;
      .quality {
        padding: 10px;
      }
      .quality-box {
        position: absolute;
        width: 100px;
        bottom: @popbox-bottom;
        left: 50%;
        margin-left: -50px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .7);
        overflow: hidden;
        .quality-value {
          width: 100%;
          height: 34px;
          line-height: 34px;
          &:hover {
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .multifunction-setting {
      position: relative;
      padding: 0;
      .setting {
        padding: 10px;
      }
      .setting-box {
        position: absolute;
        width: 100px;
        bottom: @popbox-bottom;
        left: 50%;
        margin-left: -50px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .7);
        overflow: hidden;
        list-style: none;
        font-style: normal;
        font-size: 14px;
        text-align: left;
        .play-rate {
          .play-rate-value {
            width: 100%;
            height: 30px;
            margin: 0;
            padding: 0 10px;
            line-height: 30px;
            &:hover {
              background-color: rgba(255, 255, 255, 0.5);              
            }
          }
        }
        .light-off-mode {
          .light-off-mode-switch {
            width: 100%;
            height: 30px;
            margin: 0;
            padding: 0 10px;
            line-height: 30px;
            position: relative;
            &:hover {
              cursor: pointer;
              background-color: rgba(255, 255, 255, 0.5);              
            }
            .light-off-mode-switch-btn {
              position: absolute;
              right: 24px;
              top: 6px;
            }
          }
        }
        .setting-title {
          width: 100%;
          height: 34px;
          margin: 0;
          padding: 0 10px;
          line-height: 34px;
          border-bottom: 1px solid #707070;
          &:hover {
            cursor: default;
          }
        }
      }
    }
  }
}